<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="程月">
    <title></title>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            margin: 0;
            
        }
        a{
            color: #b8b9ac;
            text-decoration: none;

        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
    nav{
        width: 100%;
        height: 50px;
        background-color: #272a27;
    }
    .container{
        width: 700px;
        margin: 0 auto;
    }
    .a1{
        color: #947b50;
    }
    .content{
        display: flex;
        justify-content: space-between;
    }
    .content>li{
        line-height: 50px;
        width: 100%;  
    }
    .content>li>a{
        width: 100%;
        padding: 0 10px;
    }
    .content>li:hover .a{
         color: #947b50;
    }
    .li-1:hover .ul-1{
        display: block;
    }
    .li-2:hover .ul-2{
        display: block;
    }
    .ul-1,.ul-2{
        width: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        display: none;
    }
    .ul-1 li,
    .ul-2 li{
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
    }
    .ul-1 li:hover,
    .ul-2 li:hover{
        background-color: #947b50;
    }
    

    </style>
</head>
<body>
     <nav>
         <div class="container">
            <ul class="content">
                <li>
                    <a href="#" class="a1">会员首页</a>
                </li>
                <li class="li-1">
                    <a href="#" class="a">看电影</a>
                     <ul class="ul-1"> 
                        <li><a href="#">华语电影</a></li>
                        <li><a href="#">海外大片</a></li>
                    </ul>
                </li>
                <li class="li-2">
                    <a href="#" class="a">看剧</a>
                    <ul class="ul-2">
                        <li><a href="#">韩剧</a></li>
                        <li><a href="#">美剧</a></li>
                        <li><a href="#">港剧</a></li>
                        <li><a href="#">英剧</a></li>
                    </ul>
                </li>
                <li><a href="#" class="a">看动漫</a></li>
                <li><a href="#" class="a">纪录片</a></li>
                <li><a href="#" class="a">德云社</a></li>
                <li><a href="#" class="a">看直播</a></li>
            </ul>
         </div>
     </nav>
</body>
</html>